<script src='http://shjs.sourceforge.net/lang/sh_javascript.js'></script>
<script src='http://shjs.sourceforge.net/sh_main.js'></script>
<link rel="stylesheet" href="../style/style.css">
<link rel='stylesheet' type='text/css' href='../style/code.css'>

<body onload="sh_highlightDocument('sh', 'javascript');">
<div id='supercontainer' ><title>
Pairing
</title>
<h1 id="exercise-4.-pairing-session">Exercise 4. Pairing session</h1>
<h2 id="goal">Goal</h2>
<ul>
<li>Use the Pairing session to pair with a Google TV</li>
</ul>
<p>In this exercise, we will be implementing the two pairing buttons.</p>
<center>
<img src="../images/pairing_buttons.png" width="80%" alt="Pairing buttons" title="Pairing">
</center>

<h2 id="prep">Prep</h2>
<ul>
<li>Completed Exercise 1 <a href="install_extensions.html">Installing the AnymoteLearningExercise extension</a></li>
<li>Completed Exercise 2 <a href="initialize_gtvremote.html">Initializing the GTVRemote object</a></li>
<li>Completed Exercise 3 <a href="discovery.html">Discovery</a></li>
<li>Open the pairing_session_controller.js file in the text editor of your choice</li>
</ul>
<h2 id="pairing">Pairing</h2>
<p>The Pairing session has <a href="http://code.google.com/p/google-tv-chrome-extensions/wiki/PairingSession">three functions</a>, pair, setChallengeResponse, and cancel.</p>
<table><tbody><tr style="background-color: #ddd"><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Returns</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Method</strong>
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
<strong>Description</strong>
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;">  </td><td style="border: 1px solid #ccc; padding: 5px;"> 
pair(<i>name</i>, <i>host</i>, <i>port</i>, <i>callback</i>)
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Starts the pairing process with a Google TV. <i>name</i> is a string which is the application name of the Chrome Extension issuing this request. <i>host</i> is a string which is the IP address of the Google TV, for example '172.17.115.193'. <i>port</i> is a number which is the Pairing session port. The Pairing session port is guaranteed to be one number higher than the Anymote port. Currently all Google TVs use 9551 as the Anymote port and therefore 9552 as the Pairing session port. However, the Discovery Client should be used to confirm the Anymote port. <i>callback</i> is a callback function that will receive Pairing events.
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;"> 
boolean
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
setChallengeResponse(<i>response</i>)
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Sends the pairing challenge response. <i>response</i> is a string which is the 4 character hexidecimal PIN displayed on the Google TV. Return true if the challenge is successfully sent.
</td></tr> <tr><td style="border: 1px solid #ccc; padding: 5px;">  </td><td style="border: 1px solid #ccc; padding: 5px;"> 
cancel()
</td><td style="border: 1px solid #ccc; padding: 5px;"> 
Aborts the pairing process.
</td></tr> </tbody></table>

<h3 id="start-pairing-process">1. Start Pairing process</h3>
Open the pairing_session_controller.js file and find the function
<pre class="sh_javascript"><code>var pairingSessionPair = function(googleTvIpAddress) {
  displayToast('pairingSessionPair not implemented');

  // TODO: Use the pairing session to pair with the Google TV.

};
</code></pre>

Change the function to start the pairing process
<pre class="sh_javascript"><code>var pairingSessionPair = function(googleTvIpAddress) {
  pairingSession.pair('Anymote Hello World', googleTvIpAddress, 9551 + 1,
    function(e) {
  switch (e.type) {
    case googletvremote.pairing.EventType.SUCCESS:
      displayToast('Successfully paired to device ' + googleTvIpAddress);
      // TODO: Add code to save the paired device.
      break;
    }
  });
};
</code></pre>

<p>You could test this function now, but it'll be more fun if you finish the next step first.</p>
<h3 id="send-challenge-response">2. Send challenge response</h3>
<p>Next we need to respond to the Google TV challenge.</p>
Find the function
<pre class="sh_javascript"><code>var sendChallengeResponse = function(challengeValue) {
  displayToast('sendChallengeResponse not implemented');
  // TODO: Send a challenge response.
};
</code></pre>

Change the function to send the challenge response
<pre class="sh_javascript"><code>var sendChallengeResponse = function(challengeValue) {
  pairingSession.setChallengeResponse(challengeValue);
};
</code></pre>

<p>At this point you should be able to pair with a Google TV with the following steps.</p>
<center>
<img src="../images/send_challenge_button.png" width="50%" alt="Pairing buttons" title="Pairing buttons"> <img src="../images/pairing_code.png" width="50%" alt="Pairing code on TV" title="Pairing code">
</center>

<p>Assuming you put in the challenge correctly you should see a message on the Google TV and on the extension.</p>
<center>
<img src="../images/successful_pairing_ext.png" width="50%" alt="Successful Pairing" title="Successful Pairing"> <img src="../images/successful_pairing.png" width="50%" alt="Successful Pairing" title="Successful Pairing">
</center>

<p>We can't actually communicate with the TV yet (since we have not opened an Anymote session), but the TV will remember this pairing.</p>
<h4 id="saving-the-paired-device">3. Saving the paired device</h4>
As a final step within the pairing_session_controller.js file we'll store the paired device. Find this function again
<pre class="sh_javascript"><code>var pairingSessionPair = function(googleTvIpAddress) {
    pairingSession.pair('Anymote Hello World', googleTvIpAddress, 9551 + 1,
      function(e) {
        switch (e.type) {
          case googletvremote.pairing.EventType.SUCCESS:
            displayToast('Successfully paired to device ' + googleTvIpAddress);

            // TODO: Add code to save the paired device.

            break;
        }
      });
};
</code></pre>

And implement the TODO as follows
<pre class="sh_javascript"><code>var pairingSessionPair = function(googleTvIpAddress) {
    pairingSession.pair('Anymote Hello World', googleTvIpAddress, 9551 + 1,
      function(e) {
        switch (e.type) {
          case googletvremote.pairing.EventType.SUCCESS:
            displayToast('Successfully paired to device ' + googleTvIpAddress);

            // DONE: Save paired device here.
            var pairedDevices = [];
            var devicesInStorage = localStorage.getItem(STORAGE_KEY_PAIRED_DEVICES);
            if (devicesInStorage) {
               pairedDevices = JSON.parse(devicesInStorage);
            }
            if (pairedDevices.indexOf(googleTvIpAddress) == -1) {
                pairedDevices.unshift(googleTvIpAddress);  // Add to beginning of array
                localStorage.setItem(STORAGE_KEY_PAIRED_DEVICES, JSON.stringify(pairedDevices));
                updatePairedDevicesList();  // Updates the UI in this demo page
            }

            break;
        }
      });
};
</code></pre>

<p>We'll use the list of saved devices later. You can run it again now to see the UI change if you like (completely optional). After pairing the popup window will have the IP Address of your Google TV in section &quot;2. Existing connections&quot;. While storing the connection is a good, it won't actually do you any good until we implement the &quot;Reestablish an existing pairing&quot; button.</p>
<p>You have completed the pairing phase. Finally time for Anymote!</p>
<center>
<img src="../images/pairing_done.png" width="90%" alt="Pairing complete" title="Pairing complete">
</center>

<p><a href="../instructions.html">Back to main page</a> <span style="float: right;">Move on to <a href="starting_anymote.html">Exercise 5 Starting Anymote</a></span></p>
